<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<style>
*{
    margin: 0;
    padding: 0;
}
#one{
	widows:740px;
	height:1000px;
    /*border: 1px solid #000;*/
    padding: 5px;
    position: relative;
    /*margin:0 auto;*/
    /*margin: 100px;*/
    /*display:none;*/
    background:url(../图片显示/timg.jpg);
}
#zz{
	width:500px; 
	height:600px;
	position: relative;
	overflow: hidden;
	margin: 0 auto;
	display: none;

}
ul{	
	/*margin: 0 auto;
	width:500px; 
	height:600px;
	overflow: hidden;
	list-style: none;
	overflow: hidden;
	position: absolute;
	width: 100%;*/
	/*display: none;*/
}
li{
	position: absolute;
	margin: 0 auto;
	list-style:none;
	float:left;
	/*display: none;*/
} 
li img {
	margin: 0 auto;
	width:500px;
	height:600px;
	/*transform: translate(90%,20%);*/
	-webkit-opacity:1;
	/*display: none;*/
}

/*------------------------------------------------*/
#anfa{
	width: 1520px;
}
button{
		position:absolute;
		top:45%;
		left:500px;
		width:500px;
		height:100px;
		display: inline-block;
		margin: 0 auto;
		font-size:50px;
	}
b{
	width:300px;
	height:80px;
}
#p1{
	position:absolute;
	top:45%;
	left:700px;
	height:180px;
	font-size:200px; 
	text-align:center;
}
</style>
<body>
	<div id="one">
		<div id="zz">
		<ul>
			<li style="z-index:10"><img src="../Users/14129/Pictures/微信图片_20190805112242.jpg"></li>
			<li style="z-index:9"><img src="../Users/14129/Pictures/微信图片_20190805103147.jpg"></li>
			<li style="z-index:8"><img src="../Users/14129/Pictures/微信图片_20190805103205.jpg"></li>
			<li style="z-index:7"><img src="../Users/14129/Pictures/微信图片_20190805103214.jpg"></li>
			<li style="z-index:6"><img src="../Users/14129/Pictures/微信图片_20190805112231.jpg"></li>
			<li style="z-index:5"><img src="../Users/14129/Pictures/微信图片_20190805112250.jpg"></li>
			<li style="z-index:4"><img src="../Users/14129/Pictures/微信图片_20190805112253.jpg"></li>
			<li style="z-index:3"><img src="../Users/14129/Pictures/微信图片_20190805112238.jpg"></li>
			<li style="z-index:2"><img src="../Users/14129/Pictures/微信图片_20190805112247.jpg"></li>
		</ul>
		</div>
		<div></div>
	</div>


<div id="anfa" align="center">
	<button id="kai">点击开始</button>
</div>
	<p id="p1"></p>
</body>
<script type="text/javascript">
function $(s){
	return document.querySelectorAll(s);
}
//按下之后倒计时出来  按钮隐藏 即时完成隐藏
//显示背景 显示图片
var p1 = $("#p1")[0],
	btn = $("#kai")[0],
	lis = $("li"),
	tud = $("#zz")[0],
	img = $("#img")
	console.log(lis)
var i = 4;
$("#kai")[0].onclick = function(e){	
	btn.style.display = "none";
	var a = setInterval(function(){
		i--;
			p1.innerHTML = i;	
		if (i<1) {
			clearInterval(a);
			p1.style.display = "none";
			tud.style.display = "block";
			var b = 0;
		 	var c = setInterval(function(e){
		 		
			 	lis[b].style.top = -(b+1)*lis[0].offsetHeight+"px";
				if (b>=7) {
			 		clearInterval(c);
			 	}
			 	b++;
		 	},1000);
		}
	},600);
}

	
</script>
</html>